<template>
  <div class="api-key-container">
    <h2><i class="fas fa-key"></i> DeepSeek API 密钥</h2>
    <p>请输入您的 DeepSeek API 密钥以启用测试生成功能</p>
    <div class="api-key-input">
      <input 
        type="text" 
        v-model="localApiKey" 
        placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        @input="updateKey"
      >
      <button class="btn" @click="save"><i class="fas fa-save"></i> 保存密钥</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApiKeyInput',
  props: {
    apiKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      localApiKey: this.apiKey
    }
  },
  methods: {
    updateKey() {
      this.$emit('update:apiKey', this.localApiKey)
    },
    save() {
      this.$emit('save')
    }
  },
  watch: {
    apiKey(newVal) {
      this.localApiKey = newVal
    }
  }
}
</script>

<style scoped>
/* Styles are inherited from parent */
</style>